<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  delTips,
  getTipsPage, type TipsDto, type TipsQuery, type TipsVo
} from '@/apis/tips'
import { Message } from '@arco-design/web-vue'
import TipsFrom from '@/views/tips/from/index.vue'
import type {Ref} from "vue-demi";
import type {Media} from "@/components/MediaSelect/index.vue";

const pagination:Ref<TipsQuery> = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  title: '',
  status: undefined
})

const visible = ref(false)

const tableData = ref<TipsVo[]>([])
const loading = ref(false)

const dto:Ref<TipsDto> = ref({
  id: 0,
  title: '',
  content: '',
  ossIds: [],
  status: 0
})

const handleClickSearch = () => {
  pagination.value.pageNum = 1
  getList()
}

const imgs:Ref<Media[]> = ref([])

// 点击新增按钮
const handleClickAdd = async () => {
  // TODO: 实现新增表单逻辑
  visible.value = true
}

// 点击删除按钮
const handleClickDel = async (record: TipsVo) => {
  await delTips(record.id)
  Message.success('删除成功')
  pagination.value.pageNum = 1
  getList()
}

// 点击编辑按钮
const handleClickEdit = (record: TipsVo) => {
  // TODO: 实现编辑表单逻辑
  // Message.success('编辑功能待实现')
  Object.assign(dto.value, record)

  imgs.value = []
  for (let i = 0; i < record.file.length; i++) {
    imgs.value.push({
      id: record.file[i].ossId,
      src: import.meta.env.VITE_API_BASE_URL + record.file[i].clientUrl,
    })
  }
  console.log(imgs.value)
  visible.value = true
}

const scroll = {
  x: 1200,
  y: 650
};

const getList = () => {
  getTipsPage(pagination.value).then(res => {
    tableData.value = res.data.data.records
    pagination.value.pageNum++
    pagination.value.total = res.data.data.total
  })
}
getList()

const fromChange = () => {
  pagination.value.pageNum = 0
  getList()
}

</script>

<template>
<div class="main">
  <TipsFrom v-model:visible="visible" :dto="dto" :imgs="imgs"
    @add="fromChange" @put="fromChange"
  />
  <a-space size="large" direction="vertical">

    <a-row :gutter="10" >

      <a-col :span="4">
        <a-input placeholder="请输入小贴士标题" v-model="pagination.title" />
      </a-col>

      <a-col :span="4">
        <a-select placeholder="请选择状态" v-model="pagination.status" allow-clear>
          <a-option :value="1">启用</a-option>
          <a-option :value="0">禁用</a-option>
        </a-select>
      </a-col>

      <a-col :span="5">
        <a-button type="primary" @click="handleClickSearch" >查询</a-button>
      </a-col>

    </a-row>

    <a-row>
      <a-col :span="10">
        <a-button @click="handleClickAdd" status="success" type="outline">新增</a-button>
      </a-col>
    </a-row>

    <a-row >
      <a-col :span="23">

        <a-table :scroll="scroll" :data="tableData" >
          <template #columns>
            <a-table-column title="ID" data-index="id"></a-table-column>
            <a-table-column title="小贴士标题" data-index="title"></a-table-column>
            <a-table-column title="上传者" data-index="updateBy"></a-table-column>
            <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
            <a-table-column title="状态" data-index="status">
              <template #cell="{ record }">
                <a-tag v-if="record.status === 1" color="green">已发布</a-tag>
                <a-tag v-else color="red">草稿</a-tag>
              </template>
            </a-table-column>
            <a-table-column title="操作" >
              <template #cell="{ record }">
                <a-button type="text" @click="handleClickEdit(record)" >编辑</a-button>
                <a-button type="text" status="danger" @click="handleClickDel(record)" >删除</a-button>
              </template>
            </a-table-column>
          </template>

          <template #footer>
            <a-pagination v-model:current="pagination.pageNum" v-model:total="pagination.total"
                          v-model:page-size="pagination.pageSize" @page-size-change="getList"
                          @change="getList"
                          show-total show-jumper show-page-size/>
          </template>

        </a-table>

      </a-col>
    </a-row>

  </a-space>
</div>
</template>

<style scoped lang="scss">
.main {
  padding: 20px;
}
</style>